<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>lazy load</title>
  <meta name="description" content="lazy load integration">
  <meta name="keywords" content="jquery, pagination, javascript, plugin" />
  <meta name="author" content="Luís Almeida">

  <meta name="viewport" content="width=device-width,initial-scale=1">

  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/jPages.css">
  <link rel="stylesheet" href="css/animate.css">
  <link rel="stylesheet" href="css/github.css">

  <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
  <script type="text/javascript" src="js/highlight.pack.js"></script>
  <script type="text/javascript" src="js/tabifier.js"></script>
  <script src="js/js.js"></script>
  <script src="js/jPages.js"></script>
  <script src="js/jquery.lazyload.js"></script>

  <script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-28718218-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

  </script>

  <script>

  /* Download lazy load plugin and make sure you add it in the head of your page. */

  /* when document is ready */
  $(function() {

    /* initiate lazyload defining a custom event to trigger image loading  */
    $("ul li img").lazyload({
      event : "turnPage",
      effect : "fadeIn"
    });

    /* initiate plugin */
    $("div.holder").jPages({
      containerID : "itemContainer",
      animation   : "fadeInUp",
      callback    : function( pages, items ){
        /* lazy load current images */
        items.showing.find("img").trigger("turnPage");
        /* lazy load next page images */
        items.oncoming.find("img").trigger("turnPage");
      }
    });

  });
  </script>

  <style type="text/css">
  .holder {
    margin: 15px 0;
  }

  .holder a {
    font-size: 12px;
    cursor: pointer;
    margin: 0 5px;
    color: #333;
  }

  .holder a:hover {
    background-color: #222;
    color: #fff;
  }

  .holder a.jp-previous { margin-right: 15px; }
  .holder a.jp-next { margin-left: 15px; }

  .holder a.jp-current, a.jp-current:hover {
    color: #FF4242;
    font-weight: bold;
  }

  .holder a.jp-disabled, a.jp-disabled:hover {
    color: #bbb;
  }

  .holder a.jp-current, a.jp-current:hover,
  .holder a.jp-disabled, a.jp-disabled:hover {
    cursor: default;
    background: none;
  }

  .holder span { margin: 0 5px; }
  </style>

</head>
<body>

  <div id="author">You can follow me on <a href="https://twitter.com/lmgalmeida">@twitter</a> or <a href="https://github.com/luis-almeida">@github</a> and you may also like <a href="http://luis-almeida.github.com/filtrify/">filtrify</a></div>

  <div id="container" class="clearfix">

    <div id="sidebar">
      <h1 id="header">jPages</h1>
      <ul id="menu">
        <li><a href="http://luis-almeida.github.com/jPages/">Info</a></li>
        <li><a href="documentation.html">documentation</a></li>

        <li><a href="download.html">download</a></li>
      </ul>

      <h2>Examples</h2>
      <ul>
        <li><a href="defaults.html">defaults</a></li>
        <li><a href="pagination.html">pagination</a></li>
        <li><a href="itemsperpage.html">items per page</a></li>
        <li><a href="customizebuttons.html">customize buttons</a></li>
        <li><a href="custombuttons.html">custom buttons</a></li>
        <li><a href="blanklinks.html">blank links</a></li>
        <li><a href="titlelinks.html">title links</a></li>
        <li><a href="keybrowse.html">key browse</a></li>
        <li><a href="scrollbrowse.html">scroll browse</a></li>
        <li><a href="auto.html">auto</a></li>
        <li><a href="direction.html">direction</a></li>
        <li><a href="cssanimation.html">css animation</a></li>
        <li><a href="jqueryanimation.html">jQuery animation</a></li>
        <li><a href="callback.html">callback</a></li>
        <li><a href="jumptopage.html">jump to page</a></li>
        <li><a href="destroy.html">destroy</a></li>
        <li class="selected"><a href="lazyload.html">lazy load</a></li>
      </ul>

      <h2>Demos</h2>
      <ul>
        <li><a href="mosaic.html">mosaic</a></li>
        <li><a href="gallery.html">gallery</a></li>
        <li><a href="table.html">table</a></li>
      </ul>

      <div class="share">
        <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://luis-almeida.github.com/jPages/" data-text="jPages" data-via="lmgalmeida" data-hashtags="jQuery">Tweet</a>
        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
      </div>

    </div> <!--! end of #sidebar -->

    <div id="content" class="defaults">

      <h2>Lazy Load</h2>
      <p>If you're paginating items containing images, Lazy Load can make the page load a lot faster.</p>
      <p>Lazy Load is a jQuery plugin that delays loading of images until they are actually visible in the page. Visit <a href="http://www.appelsiini.net/projects/lazyload">project page</a> to read the documentation and to download the last version.</p>
      <p>Because 'new browsers load images even if you remove the src attribute with JavaScript. Now you must alter your html code. Put placeholder image into src attribute of your img tag. Real image url should be stored data-original attribute'.</p>
      <p>Thanks to the callback function in jPages you can then trigger the lazy load of the images. Check how to in the following example.</p>
      <p>Keep in mind that if the image takes too long to load you will see the lazyload default animation and not the jPages animation.</p>

      <!-- navigation holder -->
      <div class="holder"></div>

      <!-- item container -->
      <ul id="itemContainer">
        <li><img src="img/preload.png" data-original="img/img (1).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (2).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (3).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (4).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (5).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (6).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (7).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (8).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (9).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (10).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (11).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (12).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (13).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (14).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (15).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (16).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (17).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (18).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (19).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (20).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (21).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (22).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (23).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (24).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (25).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (26).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (27).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (28).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (29).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (30).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (31).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (32).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (33).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (34).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (35).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (36).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (37).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (38).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (39).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (40).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (41).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (42).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (43).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (44).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (45).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (46).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (47).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (48).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (49).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (50).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (51).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (52).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (53).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (54).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (55).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (56).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (57).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (58).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (59).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (60).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (61).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (62).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (63).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (64).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (65).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (66).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (67).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (68).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (69).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (70).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (71).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (72).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (73).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (74).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (75).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (76).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (77).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (78).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (79).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (80).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (81).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (82).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (83).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (84).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (85).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (86).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (87).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (88).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (89).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (90).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (91).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (92).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (93).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (94).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (95).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (96).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (97).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (98).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (99).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (100).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (101).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (102).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (103).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (104).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (105).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (106).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (107).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (108).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (109).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (110).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (111).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (112).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (113).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (114).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (115).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (116).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (117).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (118).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (119).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (120).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (121).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (122).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (123).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (124).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (125).jpg" alt="image"><li><img src="img/preload.png" data-original="img/img (126).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (127).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (128).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (129).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (130).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (131).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (132).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (133).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (134).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (135).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (136).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (137).jpg" alt="image"></li><li><img src="img/preload.png" data-original="img/img (138).jpg" alt="image"></li>
      </ul>

    </div> <!--! end of #content -->
  </div> <!--! end of #container -->

  <a href="http://github.com/luis-almeida"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://a248.e.akamai.net/assets.github.com/img/7afbc8b248c68eb468279e8c17986ad46549fb71/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub"></a>

</body>
</html>
